<template>
    <!-- 雷达图 -->
    <div ref="myDiv" class="radar-echart"></div>
</template>

<script>
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
require('echarts/lib/chart/radar');

export default {
    mounted() {
        var chartDom = this.$refs.myDiv
        var myChart = echarts.init(chartDom)
        var option = {
            legend: {
                data: ['上个月', '本月'],
                top: '5%',
                // 图例距离顶部边距
                right: '0',
                // 图例距离左侧边距
                orient: 'vertical'
            },
            radar: {
                shape: 'circle',
                indicator: [
                    { name: '工作效率', max: 100 },
                    { name: '考勤', max: 100 },
                    { name: '积极性', max: 100 },
                    { name: '帮助同事', max: 100 },
                    { name: '自主学习', max: 100 },
                    { name: '准确率', max: 100 }
                ]
            },
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            value: [100, 95, 90, 85, 80, 75],
                            name: '上个月'
                        },
                        {
                            value: [60, 61, 62, 63, 64, 65],
                            name: '本月'
                        }
                    ]
                }
            ],

        }
        myChart.setOption(option)
    }
}
</script>

<style>
.radar-echart {
    width: 600px;
    height: 400px;
}
</style>